(5/8)Drawing Text——文字显示

这节教程的目的是在游戏画面中绘制文字,我们在游戏中经常会使用一些文字性的内容,比如生命值、人物等级、游戏分数等等,当然有一些游戏中可能会用图片直接取代文字,或是用图片绘制出一些华丽的文字效果,但还是有一些场合更适合直接写字,毕竟文字更灵活可变,并且消耗性能也更低一些。
这个教程将以绘制积分为例来介绍文字绘制的操作以及如何调整字体。
首先我们要创建一个对象,不过这个对象不同以往,我们不需要指定关联的精灵,因为这个对象并不需要被玩家看到,这是一个不可见的对象,它存在的意义只是为了触发和控制绘制文字,创建好这个对象以后,我们先设置一个“create”事件,然后在其中定义一个分数变量,并设置为0:

这个变量是我们用来记录游戏中玩家取得的积分的,这样我们在绘制文字的时候才有一个确切的内容可以去写。
可能会有人注意到,我一直都是在说“绘制文字”,因为在游戏中所有可见的内容都是被”绘制“出来的,因此我们要想在游戏中绘制文字,就需要用到”绘制“事件,绘制事件有很多,而我们在这里需要用的是最基本的”绘制事件“如下图:

我们在这个绘制方法中写入以下内容:

var cx = camera_get_view_x(view_camera[0]);
var cy = camera_get_view_y(view_camera[0]);
var cw = camera_get_view_width(view_camera[0]);

draw_text (cx+cw/2,cy+25,string(thescore))

在这里我们又定义了三个变量,但是我们在定义变量时在前面使用了“var”这个方法,这样定义出来的变量只在当前方法中有效,这样可以尽可能节约内存占用提升性能。
然后我们所定义的cx、cy和cw都是根据上节教程中所使用的镜头“view_camera[0]"的不同属性而来的

  • cx就是镜头在场景中的x坐标值
  • cy就是镜头在场景中的y坐标值
  • cw就是镜头本身的宽度属性

我们设置这样三个变量,是为了确认我们积分文字绘制的位置,看上图最下方,我们使用了一个“draw_text”的方法来绘制文字,而这个方法在下方的参数提示区中可以看到一共需要三个参数,分别是绘制文字位置的x、y坐标和需要绘制的文字内容。
而我们设定的三个值就是为了用来确定这个绘制位置的,因为我希望将分数放在画面中央靠上的位置,而且上节课我们已经设定过镜头,知道游戏画面会随着游戏镜头滚动,但我们不希望这个积分也跟着滚动,我们希望积分永远固定在镜头中的某个位置,这样不管我们控制飞船跑到什么地方,都能随时观察自己获得的积分。
所以我们要把文字的绘制坐标关联到镜头的坐标上,确保积分相对于镜头的位置是固定不变的。

  • x : cx + cw/2

因为镜头的原点在左上角,因此相对于游戏场景而已,镜头的x在0的位置,而我们希望文字能在水平方向上位于镜头的中央,所以需要加上镜头宽度的一半来作为文字绘制的x坐标

  • y : cy + 25

同样的,镜头在游戏场景中的y坐标也是0,我们希望积分稍微向下而不是完全贴在边上,所以加了25个像素的偏移量
因此我们用这两个算式计算出了文字的绘制位置,然后把他们填到了参数中,当然我们也可以单独写一个变量定义到这两个算式上,然后子啊参数中填入我 们自己定义的变量,这个视频中没有,但是自己可以尝试操作一下,并不难。
而最后的文字,只要是字符串(String)类型的内容都可以任意书写,而我们因为希望绘制分数,但是分数并不是字符串类型的变量,而是数字类型的,所以要用“String”这个方法先把数字类型的分数转换成字符串类型才可以使用。

小TIPS时间
之前说了一下,所有的可见元素都是被“绘制”出来的,所以其实在游戏中所有的可见对象其实都默认自带了一个绘制方法来把自身绘制到游戏中:

虽然你在对象里看不到这个方法的存在,但其实都是默认存在的

在完成以上的内容后,理论上我们已经可以绘制出一个积分的文字,但是这个文字所对应的分数默认设置为0,那我们怎么才能让分数增加呢?
首先,我们要设定一个规则,这里我们希望在玩家摧毁敌人的时候获得积分,每个敌人5分,那我们就可以想到,要在敌人被摧毁的时候去执行一个命令来增加分数是最合适不过了,那我们就要去敌人对象中找到摧毁自身的那个方法:

如上图,我们当时在敌人对象的“step”事件中写过一个if的判断,判断敌人的hp小于等于0时就自动摧毁,那我们就要在它被摧毁之前再做一个增加分数的操作:

with (obj_score) thescore = thescore + 5 ;

在之前的教程中曾经说过,如果我们要在A对象中修改B对象内的变量就需要用“with”这个方法,这里我们就可以用这个方法来修改分数对象中的分数值了,每次增加5。
然后我们测试一下游戏,就会看到在游戏画面的中央靠上的位置已经有了一个十分难以辨识的分数文字了,下图放大处理便于确认。

我们会发现这个分数很难被发现的原因是两个,第一是字体太小,第二是黑色的文字在这个深色背景上太不显眼了,因此下面我们要学习如何设置字体和字体颜色。
首先我们要在右侧资源树中新增一个字体文件,如下图所示:

图中我已经大致标注了一些关键区域的简要说明,如果想详细了解字体编辑器的各项功能可以去看我翻译的官方文档,起码字体编辑器这一块已经翻译完了:)
在这里,我们可以从系统字体中随便挑一个喜欢的字体来用,然后把尺寸设置到24,这样文字就会显得比较大了,在字体创建好后就可以去设置使用了:

回到我们刚才绘制分数的方法里,在绘制之前增加了两行代码

draw_set_font(fnt_score) ;
draw_set_colour(c_white);

这两行方法分别是用来设置文字字体和颜色的,其中字体就使用了我们刚才新创建的那个,而颜色这里使用的是GameMaker Studio 2自带的颜色,不光又"c_white",同样还有"c_blue","c_red"等常见的颜色,当然如果你对颜色有明确的要求,也可以在这里直接指定RGB值。
最后测试一下游戏就大功告成啦!

这部分内容虽然简单但是却很常用,这里其实还有一个没说就是中文字体的设置,因为GMS中是不能直接绘制中文的,需要在创建字体的时候单独选择文字编码范围,不过这套教程是跟着官方教程走的就不多说明了,以后另外单独说一下中文字体的设置和使用。

2017-05-25 00:26
Comments
Write a Comment